<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  value: {
    type: Array,
    default: () => []
  },
  /**
   * 关于Checkbox的属性都写在此数组的对象中
   * 增加一个text属性，用于显示插槽内容
   * 去掉checkbox的change事件，以el-checkbox-group的形式使用，就不再需要checkbox的change了
   */ 
  options: Array,
  valueFiled: {
    type: String,
    default: 'value',
  },
  labelFiled: {
    type: String,
    default: 'label',
  },
  change: {
    type: Function,
    default: () => {}
  },
  // 单选框类型 可选值 check | button
  checkboxType: {
    type: String,
    default: 'check'
  }
})

const checkList = ref(props.value)
watch(() => props.value, newVal => {
  checkList.value = newVal
})
const emit = defineEmits(['input'])
emit('input', checkList)
</script>

<template>
  <el-checkbox-group v-model="checkList" v-bind="$attrs" @change="change">
    <template v-if="checkboxType === 'check'">
      <el-checkbox v-for="checkbox in options" :key="checkbox[valueFiled]" :label="checkbox[valueFiled]" v-bind="checkbox">{{ checkbox[labelFiled] }}</el-checkbox>
    </template>
    <template v-if="checkboxType === 'button'">
      <el-checkbox-button v-for="checkbox in options" :key="checkbox[valueFiled]" :label="checkbox[valueFiled]" v-bind="checkbox">{{ checkbox[labelFiled] }}</el-checkbox-button>
    </template>
  </el-checkbox-group>
</template>

<style lang="scss" scoped></style>
